Frameworks

Organizes UI elements.

Allows sensible grouping of elements.

Some high-level frameworks

fluidPage()

An organization using the Bootstrap CSS/JavaScript/HTML system.

Define containers based on a 12-unit wide grid.

Return to Project 1

We’re now going to throw away the original UI for Project 1.

Need to use the grid system!

Nothing much was different between fluidPage() and tagList() in the previous exercise:

  1. Usual all-in-a-line layout.
  2. Fonts are different.

In order to get things laid out, we need to specify rows and columns for the 12-unit Bootstrap grid.

Use fluidRow(...) to group elements in a row.

Use column(width=..., ...) to group elements in a column of the indicated width.

Your turn

Edit UI-languages.R to change the UI to this.

The tree

UI <- fluidPage(
  fluidRow(
    column(width  = 4, First, Second),
    column(width = 3, Third)
  ),
  fluidRow(Fourth, Fifth),
  title = "Fluid!"
)

Your turn: Draw this as a tree with First, Second as the leaves and UI layout statements as the nodes. Hint: The root is at fluidPage().

What’s up with title = "Fluid!"?

fluidPage() is responsive

The layout depends on the width of the device.

Narrow window Wide window

Your turn: A new tree

Draw this interface as a tree. Remember, the nodes are UI layout functions (like column()) and the leaves are First, Second and so on.

Modify UI-languages.R to implement this tree.

Answer:

UI <- fluidPage(
  fluidRow(
    column(width  = 4, First, Second, Third),
    column(width = 6,
      column(width=8, Fourth), 
      column(width=3, Fifth)
    )
  )
)

Your turn: Another tree

Implement this UI. You’ll need to use both the width and offset arguments to column().

Answer:

UI <- fluidPage(
  fluidRow(
    column(width  = 4, First, Second, Third),
    column(width = 6, offset = 1,
      column(width=8,Fourth), 
      column(width=3, offset=1, Fifth)
    )
  )
)

Convenience UI layout functions

Your turn: Make this

Use fluidPage(), titlePanel(), and wellPanel()

The tree

UI <- 
  fluidPage(
    titlePanel("My App's Title"),
    fluidRow(
      column(width = 4, 
        wellPanel(
          First, 
          wellPanel(
            Second), 
          Third)),
      column(width = 8, 
        wellPanel(
          Fourth), 
        Fifth)
  )
)

Your turn: Make this

Use fluidPage(), sidebarLayout(), sidebarPanel(), mainPanel()andwellPanel()`

UI <- 
  fluidPage(
    sidebarLayout(
      titlePanel("My App's Title"),
      sidebarLayout(
        sidebarPanel(
          First, 
          wellPanel(Second)),
        mainPanel(
         fluidRow(
           column(Third, width=8), 
           column(Fourth, width=4)), 
         Fifth)
    )
  )
)

High-level layouts

miniUI

The tree

miniUI::miniPage(
    miniTitleBar("A miniPage App"),
    
    miniContentPanel(Fourth),
    miniTabstripPanel(
      miniTabPanel(title = "Chinese", 
                   miniButtonBlock(
                     actionButton("reset", "Reset to defaults"),
                     actionButton("clear", "Clear all")
                   ),
                   Fifth),
      miniTabPanel(title = "Ukrainian", 
                   miniTabstripPanel(
                     miniTabPanel(title="First", First),
                     miniTabPanel(title="Second", Second)),
                   Third),
      miniTabPanel(title = "Others",
                   First,
                   Second,
                   Third)
    )

Exercise n-1

With your neighbor, draw the UI tree on paper.

Exercise n

The Economist’s Big Mac index visualizer isn’t written as a Shiny app (I think!), but sketch out how you would write a Shiny app to mimic it.

If you haven’t had enough …